<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-03-25 11:23:20
-->
<template>
  <div class="header">
    <p>关于财乎的使用问题、改进建议请联系我们</p>
    <p>咨询时间：工作日09:00-18:00</p>
    <a href="tel:0731-85794878">
      <van-button type="warning" size="small" round block>
        <van-icon name="phone-o" />
        0731-85794878</van-button
      >
    </a>
  </div>

  <van-tabs v-model="active">
    <van-tab title="故障">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            @click="showTime = true"
            label-width="80"
            label="故障时间"
            placeholder="请选择时间"
            disabled
            v-model="data.errorTime"
          />
        </van-cell-group>
        <van-cell-group inset>
          <van-field
            v-model="data.description"
            label-width="100"
            rows="5"
            autosize
            label="留言"
            type="textarea"
            placeholder="请输入留言"
            show-word-limit
          />
        </van-cell-group>
        <van-cell-group inset>
          <div class="form_title">问题图片：</div>
          <div class="img_list">
            <div>
              <Uplaod @uploadSucc="uploadSucc" />
            </div>
          </div>
        </van-cell-group>
        <van-cell-group inset>
          <van-field
            type="tel"
            v-model="data.contact"
            label="手机号"
            label-width="100"
            maxlength="11"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </van-tab>
    <van-tab title="建议">
      <van-form @submit="onSubmit2">
        <van-cell-group inset>
          <van-field
            v-model="data2.description"
            label-width="100"
            rows="5"
            autosize
            label="建议内容"
            type="textarea"
            placeholder="告诉我们你的建议和想法"
            show-word-limit
          />
        </van-cell-group>
        <van-cell-group inset>
          <div class="form_title">问题图片：</div>
          <div class="img_list">
            <div>
              <Uplaod @uploadSucc="uploadSucc" />
            </div>
          </div>
        </van-cell-group>
        <van-cell-group inset>
          <van-field
            type="tel"
            v-model="data2.contact"
            label="手机号"
            label-width="100"
            maxlength="11"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </van-tab>
  </van-tabs>

  <van-action-sheet v-model:show="showTime" title="选择时间">
    <van-datetime-picker
      type="datetime"
      title="选择完整时间"
      @cancel="showTime = false"
      @confirm="confirm"
    />
  </van-action-sheet>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import { fmtTime } from "@/utils";
import { saveFault, saveSuggest } from "@/api/my";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const active = ref("1");
    const showTime = ref(false);
    const data = reactive({
      errorTime: "",
      description: "",
      imgs: "",
      contact: "",
    });
    const data2 = reactive({
      suggestType: 0,
      description: null,
      imgs: "",
      contact: null,
    });
    const router = useRouter();
    const onSubmit = async (v) => {
      const res = await saveFault(data);
      if (typeof res === "object") {
        Toast.fail("反馈成功,请等待官方处理");
        router.push("/my");
      }
    };
    const onSubmit2 = async (v) => {
      const res = await saveSuggest(data2);
      if (typeof res === "object") {
        Toast.fail("反馈成功,请等待官方处理");
        router.push("/my");
      }
    };
    const confirm = (v) => {
      data.errorTime = fmtTime(v);
      showTime.value = false;
    };
    const uploadSucc = (v) => {
      data.imgs = v;
    };
    return {
      data,
      data2,
      showTime,
      active,
      confirm,
      onSubmit,
      onSubmit2,
      uploadSucc,
    };
  },
});
</script>
<style scoped lang='scss'>
.header {
  text-align: center;
  background: #2e353d;
  font-size: 14px;
  color: #fff;
  padding: 10px 0;
  button {
    margin: 0 auto;
    width: 200px;
    font-weight: bold;
    color: #2e353d;
    background: #fff;
    border-color: #2e353d;
  }
}
.form_title {
  margin-bottom: 10px;
}
.img_list {
  display: flex;
}
</style>